<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-03-07 16:24:32
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-03-07 16:33:35
 * @FilePath: /antd-vue2-template/src/components/VIcon/VIcon.vue
 * @Description: 通用自定义icon
-->

<template>
  <span v-if="isCustom && isLocal" :class="['iconfont', name]" :style="wrapStyle"></span>
  <IconFont v-else-if="isCustom" :type="name" :style="wrapStyle" />
  <a-icon v-else :type="name" :theme="iconTheme" :style="wrapStyle" />
</template>

<script>
import Vue from 'vue';
import { convertUtils, numberUtils, objectUtils } from '@/utils';
import { Icon } from 'ant-design-vue';
import defaultSettings from '@/config/defaultSettings';

const IconFont = Icon.createFromIconfontCN({
  // 在 iconfont.cn 上生成，换成自己的字体库
  scriptUrl: '//at.alicdn.com/t/c/font_3679914_35i5pa0qlg5.js'
});

export default {
  // 组件的名字或者页面的名字
  name: 'VIcon',
  // 加载组件
  components: {
    IconFont
  },
  // 父级组件传过来的值
  props: {
    // icon 名字
    name: {
      type: String,
      default: ''
    },

    // 字体大小，默认 14
    size: {
      type: [String, Number],
      default: 14
    },

    // 字体颜色
    color: {
      type: String,
      default: ''
    },

    // icon 主题，只是antd自带icon 有用
    iconTheme: {
      type: String,
      default: 'outlined'
    }
  },
  // 页面数据
  data() {
    return {};
  },
  computed: {
    // 是否是自定义icon
    isCustom() {
      return this.name.startsWith('icon-');
    },

    // 是否使用本地字体库
    isLocal() {
      return !!defaultSettings.isLocalIconFont;
    },

    // 字体样式
    wrapStyle() {
      let fs = objectUtils.isString(this.size) ? parseInt(this.size) : this.size;

      return {
        fontSize: `${fs}px`,
        color: this.color
      };
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {}
};
</script>

<style lang="less" scoped>
</style>
